<template>
	<view class="orders">
		<view class="top">
			<view :class="['box',{active:num==0}]" @click="FindOrderFn(0)">
				<text>全部</text>
			</view>
			<view :class="['box',{active:num==1}]" @click="FindOrderFn(1)">
				<text>进行中</text>
			</view>
			<view :class="['box',{active:num==2}]" @click="FindOrderFn(2)">
				<text>已完成</text>
			</view>
		</view>
		<view class="bottom">
			<view class="box" v-for="item in order">
				<view class="left">
					<image :src="item.smallImg" mode="widthFix"></image>
				</view>
				<view class="right">
					<view class="title">
						<text>{{item.name}}</text>
					</view>
					<view class="rule">
						<text>{{item.rule}}</text>
					</view>
					<view class="person">
						<text>收货人：{{item.receiver}}</text>
					</view>
					<view class="address">
						<text>收获地址：{{item.address}}</text>
					</view>
					<view class="count">
						<text>数量：{{item.count}}</text>
					</view>
					<view class="price">
						<text>价格：{{item.price}}元</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { findOrderFn } from '../../api/index.js';
	export default {
		data() {
			return {
				token:"",
				order:[],
				num:0
			}
		},
		onLoad(options) {
			this.token = uni.getStorageSync('token');
			this.FindOrderFn(0);
		},
		onShow() {
			this.token = uni.getStorageSync('token');
		},
		methods: {
			async FindOrderFn(num){
				this.num = num;
				await findOrderFn({
					appkey:"U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA=",
					tokenString:this.token,
					status:num
				})
				.then(
					content=>{
						// console.log(content);
						let {code,result} = content;
						if(code == 70000){
							this.order = result;
						}
					}
				)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.orders{
		margin: 40rpx 20rpx;
		.top{
			display: flex;
			justify-content: space-around;
			text-align: center;
			border-bottom: 1px solid #292b74;
			padding-bottom: 20rpx;
			.box{
				width: 200rpx;
				height: 50rpx;
				line-height: 50rpx;
				background-color: #fff;
				border: 1px solid #252973;
				color: #292b74;
				border-radius: 25rpx;
			}
			.box.active{
				background-color: #292b74;
				color: #fff;
			}
		}
		.bottom{
			.box{
				margin-bottom: 40rpx;
				display: flex;
				width: 100%;
				.left{
					width: 50%;
					image{
						width: 100%;
					}
				}
				.right{
					margin-left: 20rpx;
					width: 50%;
					.title{
						font-size: 38rpx;
						font-weight: bold;
						margin-bottom: 10rpx;
						display: flex;
						justify-content: space-between;
					}
					.rule{
						font-size: 24rpx;
						color: #ccc;
						margin-bottom: 10rpx;
					}
					.person{
						font-size: 24rpx;
						margin-bottom: 10rpx;
					}
					.address{
						font-size: 24rpx;
						margin-bottom: 10rpx;
					}
					.count{
						margin-bottom: 10rpx;
					}
					.price{
						color: red;
						font-size: 36rpx;
					}
				}
			}
		}
	}
</style>
